window.onload = function() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
x0=20;y0=20;
hmax=500;
xmax=500;
endx=canvas.height-20;
endy=canvas.width-20;
dx=250;
drowface();
//drowx(hRange.slider("value"));
function start(angle,speed,high)
{
wotch.start();
var yhigh = 520 - high*5;
 v = 300;
line = {x:20,y:yhigh};
 line.y = v; 
first={x:line.x, y:line.y};

//drow line
tid = setInterval(drowLine, 33);
function drowLine()
{ 
 first.x = line.x; first.y = line.y;
 line.x+=10;
 //line.y = yhigh - line.y;
 if( line.x >= 400){
clearTimeout(tid);
wotch.stop();
//button enable
button.disabled = false;
setTimeout( function() {
ctx.strokeRect(x0,v,400-10,520-v);
setTimeout( function() {
ctx.fillStyle='green';
ctx.fillRect(x0,v,400-10,520-v);
ctx.fillStyle='white';
//ctx.fillRect(x0+80,v+80,400-10-2*80,520-v-2*80);
drowtext('S = vt','white',x0+100,v+100);
drowtext('գրաֆիկի պրոեկցիաի','white',x0+100,v+100+25);
drowtext('մակերեսը կտա S-ը','white',x0+100,v+100+25+25);
drowtext('V','green',400/2,v-20);
drowtext('t','green',400+20,v+100);
 }, 1500);
 }, 1500);

//drow text
function drowtext(text,color,x,y){
ctx.beginPath();
ctx.fillStyle=color;
ctx.font="20px Arial";
ctx.fillText(text,x,y);
ctx.stroke();
ctx.closePath();
}
}   
ctx.beginPath();
ctx.strokeStyle='green';
ctx.moveTo(first.x,first.y);
ctx.lineTo(line.x,line.y);
ctx.stroke();
ctx.closePath();
}

}

///////////////////////////////////////////
function showresult(){
showdiv = document.getElementById("showdiv");
showdiv.style.display = "block";
var x0_show = document.getElementById("x0");
 x0_show.innerHTML='0';
var y0_show = document.getElementById("y0");
 y0_show.innerHTML=hRange.slider("value");
var v0x_show = document.getElementById("v0x");
 var _vx=Math.round(vx*1000)/1000;	
 v0x_show.innerHTML=_vx;
var v0y_show = document.getElementById("v0y");
 var _vy=Math.round(vy*1000)/1000;
 v0y_show.innerHTML=_vy;
var vx_show = document.getElementById("vx");
 vx_show.innerHTML=-_vx;
var vy_show = document.getElementById("vy");
 vy_show.innerHTML=-_vy;
var y = document.getElementById("y");
y.innerHTML=0;
var t = 2*vx/9.8; 
var s = vx*t ;
s=Math.round(s*10000)/10000;
t=Math.round(t*10000)/10000;
var x= document.getElementById("x");
 x.innerHTML=s; 
var tfall= document.getElementById("tfall");
 tfall.innerHTML=t;
 

}
button=document.getElementById("button");
button.addEventListener("click", function(){
//button disable
button.disabled = true;
//car motion
$("#motion img").animate({marginLeft: "82%"}, 5000);
//
start(cRange.slider("value"),sRange.slider("value"),hRange.slider("value"));
showresult(); }, false);
cleen=document.getElementById("cleen");
cleen.addEventListener("click", function(){
clearTimeout(tid);
drowface();
}, false);
}
// create function
function drowface(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.font = "14px Times-Roman";
ctx.strokeStyle='black';
ctx.strokeRect(x0,y0,xmax,hmax);
ctx.strokeStyle='blue';
ctx.lineWidth=2;
ctx.strokeText('0',x0-15,hmax+x0);
ctx.stroke();
}
function drowx(high)
{
drowface();
var yhigh = 520 - high*5;
line = {x:20,y:yhigh};
first={x:line.x, y:line.y};
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(first.x,first.y);
ctx.lineTo(first.x-20,first.y);
ctx.strokeText('Xo',line.x-20,line.y-5);
ctx.stroke();
ctx.closePath();
}
////////////////////